<template>
  <div>
    <el-drawer
      :title="`计划充装单详情（${detailData.fillCode}）`"
      :visible.sync="visible"
      :append-to-body="true"
      :destroy-on-close="true"
      :with-header="false"
      size="75%"
    >
      <div class="title">
        <div class="title-text">计划充装单详情（{{ detailData.fillCode }}）</div>
        <el-tag class="tag" :class="setClassName(detailData)">{{ formatColumnMap(billStatusMap, 'value', detailData.billStatus, 'desc') }}</el-tag>
      </div>
      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <el-descriptions title="基本信息" :label-style="{fontSize:'14px'}" :content-style="{fontSize:'14px'}">
            <el-descriptions-item label="仓库名称">{{ detailData.storeName }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ detailData.billStatus && formatColumnMap(billStatusMap, 'value', detailData.billStatus, 'desc') }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ detailData.createUser }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ parseTime(detailData.createTime , '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.billStatus == 2 || detailData.billStatus == 3" label="审核人">{{ detailData.auditor }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.billStatus == 2 || detailData.billStatus == 3" label="审核时间">{{ detailData.auditDt && parseTime(detailData.auditDt , '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.billStatus == -1" label="作废人">{{ detailData.modifyUser }}</el-descriptions-item>
            <el-descriptions-item v-if="detailData.billStatus == -1" label="作废时间">{{ detailData.modifyTime && parseTime(detailData.modifyTime , '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ detailData.remark }}</el-descriptions-item>
          </el-descriptions>
          <!-- 表格 -->
          <div class="section-title">气瓶信息</div>
          <lb-table
            id="lbTable"
            ref="lbTable"
            border
            element-loading-text="加载中"
            :data="tableData.data"
            :column="tableData.column"
            :immediate-fetch="false"
            :pagination="false"
            :max-height="300"
          />
          <div class="settlement">合计{{ allSum }}瓶</div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <span>流转信息：</span>
          <el-timeline :reverse="false">
            <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.happendDt, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker" style="color: red;">{{ `${item.marker}` }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

  <script>
  import { plannedFillingOrderDetail, commonTansferInfo } from '@/api'
  import { formatColumnMap } from '@/utils'
  import { parseTime } from '@/utils'

  export default {
    name: 'plannedFillingOrderDetail',
    props: {
      billStatusMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        formatColumnMap,
        parseTime,
        visible: false,
        detailData: {},
        flowInfoData: [], // 流转信息
        sumObj: [],
        tableData: {
          column: [
            {
              type: 'index'
            },
            {
              prop: 'goodsName',
              width: 150,
              label: '商品名称'
            },
            {
              prop: 'goodsSpec',
              width: 80,
              label: '规格型号'
            },
            {
              prop: 'gdCount',
              width: 80,
              label: '数量'
            },
            {
              prop: 'chipCodes',
              showOverflowTooltip: true,
              label: '气瓶条码'
            }
          ],
          data: []
        }
      }
    },
    computed: {
      allSum() {
        return this.tableData.data.reduce((prev, cur) => {
          return prev + cur.gdCount
        }, 0)
      }
    },
    methods: {
      open(temp) {
        return new Promise(async(resolve) => {
          this.resolve = resolve
          if (temp.fillCode) {
            this.temp = temp
            await this.getDetail(temp)
            this.visible = true
          }
        })
      },
      async getDetail(temp) {
        const [res, res1] = await Promise.all([
          plannedFillingOrderDetail({ fillCode: temp.fillCode }),
          commonTansferInfo({ billCode: temp.fillCode, billType: 18 })])
        if (res.data) {
          this.detailData = res.data
          this.tableData.data = res.data.detailInfoList
        }
        if (res1.data) {
          this.flowInfoData = res1.data
        }
      },
      setClassName(row) {
        if (row.billStatus === 1 || row.billStatus === 2 || row.billStatus === 3) {
          // 7:已退单 3:退单申请中
          return 'green'
        }
        if (row.billStatus === -1) {
          // 9:退货申请中 12:已退货
          return 'red'
        }
        return ''
      }
    }
  }
  </script>

  <style lang="scss" scoped>
    .title {
      display: flex;
      padding: 20px;
      .title-text {
        line-height: 25px;
      }
      .tag {
        margin: 0 10px;
      }
    }
    .center {
      display: flex;
      height: 500px;
      padding: 0 20px;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      text-align: left;

      .left {
        position: relative;
        width: 750px;
        height: 100%;
        /deep/ .el-descriptions__title {
          font-size: 15px;
          color: #38BDBD;
        }

        .section-title {
          margin-bottom: 20px;
          font-size: 15px;
          font-weight: 700;
          color: #38BDBD;
        }
        .settlement {
          margin-top: 20px;
          font-size: 16px;
          font-weight: 700;
          color: #F00;
        }

        .el-table {
          margin-bottom: 20px;
        }

        .el-descriptions {
          margin-bottom: 20px;
        }

        img {
          width: 61px;
          height: 61px;
          margin-left: 80px;
        }
      }

      .right {
        height: 100%;
        margin-left: 15px;
        flex: 1;

        span {
          display: block;
          height: 24px;
          padding-left: 20px;
          font-weight: 700;
          line-height: 24px;
          color: white;
          background-color: #38BDBD;
          border-radius: 5px;
        }

        .el-timeline {
          margin-top: 20px;
        }
      }
    }
  </style>
